<template>
  <div id="back">
  <div class="demo-image"  v-for="item in onMovies">
        <div id="pic">
          <img id="pic1" :src='item.fnImg'>
        </div>
        <div id="minfor">
          <h2>{{item.fnName}}</h2>
         <div id="xian"> <el-divider id="hh"></el-divider></div>
              <div id="movInfor">
              <span>导&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;演:&nbsp;{{item.fnDirector}}</span><br>
                <span>领衔主演:<span>{{item.fnActor}}</span></span><br>
              <span>国家/地区:&nbsp;{{item.fnCountry}}</span><br>
              <span>类&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型:&nbsp;{{item.fnType}}</span><br>
              <span>片&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;长:&nbsp;{{item.fnTime}}分</span><br>
              </div>
            <el-button type="warning"  id="butt" icon="el-icon-shopping-cart-2" @click="toBuy(item.fnId)">立即购买</el-button>
        </div>
  </div>

                <el-pagination id="fy"
                  @current-change="handleCurrentChange"
                  :current-page.sync="currentPage"
                  :page-size="pageSize"
                  layout="total, prev, pager, next"
                  :total="allCount">
                </el-pagination>
      <div>

      </div>
  </div>
</template>

<script>
    export default {
        name: "OnLineMovie",
        data() {
            return {
                currentPage:1,  //客户端想看的页数
                pageSize:0,     //每页展示的条数
                allCount:0,     //总条数
                pages:0,       //总页数
                onMovies:[
                      {
                          fnId:1,
                          fnImg:"https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png",
                          fnName:'澳门风云',
                          fnDirector:'王晶',
                          fnActor:['刘德华','张曼玉','张学友','郭富城'],
                          fnCountry:'中国/香港',
                          fnType:'喜剧/动作',
                          fnTime:150
                      },
                      {
                          fnId:2,
                          fnImg:"https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png",
                          fnName:'北京遇上西雅图',
                          fnDirector:'王晶',
                          fnActor:['刘德华','张曼玉','张学友','郭富城'],
                          fnCountry:'中国/香港',
                          fnType:'喜剧/动作',
                          fnTime:150
                      }
                  ]
            }
        },
        methods: {

            toBuy(fnId) {                    //点击购买发送请求，拿到
                var vm = this;
                                            //点击购买判断是否登录
                if (sessionStorage.getItem("userinfo")!=null&&sessionStorage.getItem("userinfo")!=""){
              this.axios({
                  url: 'http://localhost:80/api/hotmovie/selectOneMovies',
                  params: {
                      'fnId':fnId,
                  }
              }).then(function (res) {
                  if (res.data.success){
                      var OnMovie = res.data.data;
                      // console.log("ooooooo===="+OnMovie.fnId)
                    vm.$router.push({name: 'BuyTicket', params:{'onMovie': OnMovie}})
                  }else {
                      vm.$message({
                          showClose: true,
                          message: res.data.message,
                          type: 'error'
                      })
                  }
              })
                }else {
                    this.$router.push("/login")
                }
            },
            selectOnMovies() {
                // var vm = this;
                // this.axios({
                //     url: "http://localhost:80/selectOnMovies"
                // }).then(function (res) {
                //     if (res.data.success) {
                //         vm.onMovies = res.data.data
                //     } else {
                //         vm.$message({
                //             showClose: true,
                //             message: res.data.message,
                //             type: 'error'
                //         })
                //     }
                //     console.log(res);
                // })
                var vm = this;
                var currentPage= this.currentPage;

                console.log(currentPage);
                 this.axios({
                     url:'http://localhost:80/api/hotmovie/onepage',
                     params:{'currentPage':currentPage}
                 }).then(function (res) {
                     if (res.data.success){
                         vm.onMovies = res.data.data.onMovies;
                         vm.pageSize = res.data.data.pageSize;
                         vm.allCount = res.data.data.allCount;
                         vm.pages = res.data.data.pages;
                     }
                 })
            },
            handleCurrentChange(){
                console.log(this.currentPage);
                var vm = this;
                var currentPage= this.currentPage;
                this.axios({
                    url:'http://localhost:80/api/hotmovie/onepage',
                    params:{'currentPage':currentPage}
                }).then(function (res) {
                    vm.onMovies = res.data.data.onMovies;
                    vm.pageSize = res.data.data.pageSize;
                    vm.allCount = res.data.data.allCount;
                    vm.pages = res.data.data.pages;
                })
            }
        },
            created() {
                this.selectOnMovies();
            }

    }
</script>

<style scoped>
.demo-image{
   height: 320px;


}
  #pic1{
    width: 210px;
    height: 300px;
    border: 	#D3D3D3 3px solid;
    float: left;
    margin-left: 250px;
  }
  #minfor{
    width: 550px;
    height: 305px;
    /*border: aqua 1px solid;*/
    background-color: rgba(220,220,220,0.3);
    /*box-shadow: #666666 0px 2px;*/
    border-radius: 0 10px 10px 0;
    float: left;
  }
  #hot{
  width: 200px;
  height: 400px;
  /*border: red 1px solid;*/
  float: left;
    margin-left: 100px;
  }
  h2{
    /*border: red 1px solid;*/
    margin-left: 10px;
    font-family: PingFang SC;
  }
  #hh{
    margin-top: -14px;
    margin-left: 10px;
  }
  #movInfor{
    /*border: green 1px solid;*/
    margin-top: -20px;
  }
  span{
    margin-left: 10px;
    line-height: 35px;
  }
  #butt{
    margin-left: 20px;
    margin-top: 10px;
    width: 120px;
    height: 40px;
  }
  #fy{
    margin-left: 600px;
  }
  /*#back{*/
  /*  background-color: 	#D3D3D3	;*/
  /*  width: 1000px;*/
  /*  margin: auto;*/
  /*}*/
  #xian{
    width: 540px;
  }
</style>
